<template>
    <div class="pages">
        <p class="title">
          <img :src="headerImg" alt="">
        </p>
        <p class="name">{{name}}</p>
        <p class="grade" style="font-size:30rpx;">
          <span >
            <span>当前会员等级:</span>
            <span>{{vip}}</span>
          </span>
          <span>
            <span>到期时间:</span>
            <span v-if="vipEndTime">{{vipEndTime}}</span>
            <span v-if="!vipEndTime">无</span>
          </span>
        </p>
      <van-divider />
      <div class="payBox">
        <div
        class="test"
        :style="{left:left+'px'}"
        @touchstart="touchStart"
        @touchmove="touchMove"
         @touchend="touchEnd">
         <div class="leftType">
           到底了,请向右滑
         </div>
            <ul class="list" >
              <li>
                <van-checkbox :value="checked" checked-color="#07c160" @change="onChange" class="checkbox">

                </van-checkbox>
                <p>vip会员</p>
                <van-divider contentPosition="center">58元/年</van-divider>
                <ul  style="font-size: 28rpx;">
                  <li>名片下免费分组上传总容量4G约800张图片</li>
                  <li>每推荐朋友成功成为VIP会员得20元推荐费</li>

                </ul>
              </li>
              <li>

                   <p>普通会员</p>
                   <van-divider contentPosition="center">免费/年</van-divider>
                   <ul  style="font-size: 28rpx;">
                    <li>名片下免费上传图片10张</li>
                    <li>每推荐朋友成功成为VIP会员无推荐费</li>

                   </ul>
              </li>

            </ul>
            <div class="leftType">
              到底了,请向左滑
            </div>
         </div>
       <!-- <swiper class="swiper" :indicator-dots="indicatorDots"  :interval="interval" :duration="duration" :autoplay="autoplay">

              <swiper-item v-for="(item, index) in images" :key="index">
                <div class="product">
                  <ul class="product_list">
                    <li @click="getDetail">
                      <img src="../../../static/images/user.png" alt="">
                      <p>步阳精品门</p>
                    </li>
                    <li>
                      <img src="../../../static/images/user.png" alt="">
                      <p>步阳精品门</p>
                    </li>
                  </ul>
                </div>
              </swiper-item>

            </swiper> -->
            <div class="btBox">
             <!-- <van-divider /> -->
              <span>￥58元/年</span>
              <p><van-button type="primary" @click="pay">立即开通</van-button></p>
            </div>
      </div>
    </div>
</template>

<script>
  export default{
    data () {
      return {
        indicatorDots: false,
        checked: true,
        autoplay: false,
        vip:"免费用户",
        interval: 3000,
        mbNumber: 1,
        left: 0,
        vipEndTime:"",
          name:"",
        duration: 500,
        touchStartX: 0, // 触摸时的原点
        touchStartY: 0, // 触摸时的原点
        time: 0, // 时间记录，用于滑动时且时间小于1s则执行左右滑动
        interval: '', // 记录/清理时间记录
        touchMoveX: 0, // x轴方向移动的距离
        touchMoveY: 0, // y轴方向移动的距离
        headerImg:"",
        // images: [{
        //   picUrl: require('../../../static/images/timg1.jpg')
        // }, {
        //   picUrl: require('../../../static/images/timg2.jpg')
        // }, {
        //   picUrl: require('../../../static/images/timg3.jpg')
        // }]
      }
    },
    onShow () {
      this.vipEndTime=wx.getStorageSync('vipEndTime')
      let userInfo = JSON.parse(JSON.parse(wx.getStorageSync('userInfo')))
      this.headerImg = userInfo.avatarUrl;
      let isVip=wx.getStorageSync('isVip');
      if(isVip){
        this.vip="VIP会员"
      }else{
        this.vip="免费用户"
      }
      this.name=userInfo.nickName;
      wx.setNavigationBarTitle({
        title: '支付'
      })
    },
    methods: {
        pay(){
            let that=this;
            let openId=wx.getStorageSync('openId')
          let userId =  wx.getStorageSync('userId')
            let notifyUrl="/pages/my/main";
            let money=58*100;
            this.$http.request({
                method: 'POST',
                url: `/api/pay/unifiedOrder`,
                body: {
                    openId:openId,
                    body:"支付",
                    notifyUrl:notifyUrl,
                    totalFee:money
                }
            }).then((data)=>{
                if(data.code==200){
                    let result=data.data;
                    wx.requestPayment({
                        timeStamp: result.timeStamp,
                        nonceStr: result.nonceStr,
                        package: result.packageValue,
                        signType: 'MD5',
                        paySign: result.paySign,
                        success (res) {
                           // console.log(res)
                            that.$http.request({
                                method: 'POST',
                                url: `/api/pay/okPayCallback`,
                                body: {
                                    "body": "支付",
                                    "notifyUrl":notifyUrl,
                                    "openid": openId,
                                    "outTradeNo": result.outTradeNo,
                                    "packageValue": result.packageValue,
                                    "totalFee": money,
                                  userId:userId
                                }
                            }).then((data)=>{
                                wx.showToast({
                                    title: '支付成功',
                                    icon: 'success',
                                    duration: 2000,
                                    success:()=>{
                                        wx.reLaunch({url:`/pages/my/main`})
                                    }
                                })
                            })
                        },
                        fail (res) {
                           // console.log(res)
                        }
                    })
                }
            })
        },
      touchStart (e) {
       // console.log(e)
        this.touchStartX = e.touches[0].pageX // 获取触摸时的原点
        this.touchStartY = e.touches[0].pageY // 获取触摸时的原点
        // 使用js计时器记录时间
        this.interval = setInterval(() => {
          this.time++
        }, 100)
      },
      touchMove (e) {
        this.touchMoveX = e.touches[0].pageX
        this.touchMoveY = e.touches[0].pageY
      },
      touchEnd: function (e) {
        var moveX = this.touchMoveX - this.touchStartX
        var moveY = this.touchMoveY - this.touchStartY
        if (Math.sign(moveX) == -1) {
          moveX = moveX * -1
        }
        if (Math.sign(moveY) == -1) {
          moveY = moveY * -1
        }
        if (moveX <= moveY) { // 上下
          // 向上滑动
          if (this.touchMoveY - this.touchStartY <= -30 && this.time < 10) {
         //   console.log('向上滑动')
          }
          // 向下滑动
          if (this.touchMoveY - this.touchStartY >= 30 && this.time < 10) {
          //  console.log('向下滑动 ')
          }
        } else { // 左右
          // 向左滑动
          if (this.touchMoveX - this.touchStartX <= -30 && this.time < 10) {
           // console.log('左滑页面')
            if (this.left == 0) {
              this.left -= 259
            }
          }
          // 向右滑动
          if (this.touchMoveX - this.touchStartX >= 30 && this.time < 10) {
          //  console.log('向右滑动')
            if (this.left == -259) {
              this.left += 259
            }
          }
        }
        clearInterval(this.interval) // 清除setInterval
        this.time = 0
      }
    }
  }
</script>

<style scoped>
  .test{
    width: 645px;
    height: 300px;

    position: absolute;
    left:0;
    top:0;
    box-sizing: border-box;
    transition: all 0.8s;
    display: flex;
    justify-content: flex-start;
  }
  .list .checkbox{
    text-align: center;
    display: flex;
    justify-content: center;

  }
  .btBox{
    position: fixed;
    bottom:0;
    left:0;
    right: 0;
    height: 50px;
    border-top:1px solid #eee;
    display: flex;
    box-sizing: border-box;
    padding:0 30rpx;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }
  .list{
    height: 100%;
   display: flex;

   justify-content: flex-start;
  }
  .list>li:last-child{
    margin-right: 90rpx;
  }
  .list ul>li{
     color: #979797;
 padding-left:30rpx;
  }
  .list>li>p{
    text-align: center;
    font-size: 36rpx;
  }
  .list ul>li{
     position: relative;
  }
  .list ul>li:before{
    content: "";
    width: 10px;
    height: 10px;
    background: url('../../../static/images/circle.png') no-repeat;
    background-size: cover;
    position: absolute;
    top:5px;
    left:0;
  }
  .list>li{
    box-sizing: border-box;


    padding:30rpx;
    width: 200px;
    height: 100%;
    border-radius: 20rpx;
    border:1px solid #979797;
    margin-left: 90rpx;
  }
  .leftType{
    width: 50px;
    height: 100%;
    background: #F7F7F7;
    color: #B2B2B2;
writing-mode:vertical-lr;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
     font-size: 30rpx;
     letter-spacing:20rpx;
  }
  .payBox{
    width: 100%;
    height: 300px;
    position: relative;
  }
  .pages{
    width: 100%;
    height: 100%;
    background: #ffff;
     font-size: 24rpx;
     color: #000;
  }
  .pages>p{
    text-align: center;
  }
  .title{

  }
  .name{
    margin-bottom: 10rpx;
  }
  .grade{
    color: #979797;
  }
  .grade>span>span{
    margin-right: 10rpx;
  }
  .grade>span:first-child{
    position: relative;
    margin-right: 10rpx;
  }
  .grade>span:first-child:after{
    content: "";
    width: 1px;
    height: 25rpx;
    background: #979797;
    position: absolute;
    top:3px;
    right: 0;
  }
   .pages img{
     width: 150rpx;
     height: 150rpx;
     border-radius: 50%;
   }
</style>
